<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8">
    <title>公告管理</title>
    <link rel="stylesheet" type="text/css" th:href="@{/dist/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/index.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <!--引入js文件-->
    <script src="js/details.js" th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
    <script src="js/cart.js" th:src="@{/js/cart.js}" type="text/javascript" charset="utf-8"></script>
    <script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
    <script src="js/carousel.js" th:src="@{/js/carousel.js}" type="text/javascript" charset="utf-8"></script>
    <script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
    <script src="js/wow.js" th:src="@{/js/wow.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:inline="javascript"></script>

    <!-- 引入jQuery库 -->
    <script src="dist/js/jquery.min.js" th:src="@{/dist/js/jquery.min.js}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


    <!-- Bootstrap 和 layui 等其他库 -->
    <script src="dist/js/bootstrap.min.js" th:src="@{/dist/js/bootstrap.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>


</head>
<body>
<div class="container">
    <!--导航部分  begin-->
    <div th:replace="admin/common/header :: nav"></div>
    <!--导航部分 end-->
    <!-- 公告列表 -->
    <div class="table-responsive" id="imgDiv">
        <table class="table table-hover table-striped">
            <thead>
            <tr class="text-success success">
                <th>序号</th>
                <th>标题</th>
                <th>活动内容</th>
                <th>发布时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="tbn" th:each="notify,iter:${notifyList}">
            <tr>
                <td th:text="${iter.index + 1}"></td>
                <td th:text="${notify.notifyTitle}"></td>
                <td th:text="${notify.notifyContext}"></td>
                <td th:text="${notify.notifyCreateDate}"></td>
                <td>
                    <!-- 在 onchange 事件中传递活动ID -->
                    <select class="form-control" style="width: 100px;display: inline;" th:onchange="|operate(this, [[${notify.notifyId}]])|">
                        <option value=""></option>
                        <option value="update">更新</option>
                        <option value="delete">删除活动</option>
                    </select>
                </td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td colspan="1"></td>
                <td class="text-success" align="left">总数量:</td>
                <td class="text-success" th:text="${notifyList.size()}"></td>
            </tr>
            <tr style="background-color: white;">
            <tr>
                <td colspan="1">
                    <a href="#" data-toggle="modal" data-target="#addNoticeModal" class="btn btn-info">
                        发布新活动＋
                    </a>
                </td>
            </tr>
            </tfoot>
        </table>
    </div>

    <div class="container">
        <!--首页底部信息 begin-->
        <div th:replace="common/footer :: footer"></div>
    </div>
    </div>

<!-- 新增公告模态框 -->
<div class="modal fade" id="addNoticeModal" tabindex="-1" role="dialog" aria-labelledby="notifyInfoModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <!-- 新增公告表单 -->
            <div class="modal-header">
                <h5 class="modal-title" style="text-align: center;">新增公告</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form" method="post" th:action="@{/admin/addNotify}"  accept-charset="UTF-8">
                    <div class="form-group">
                        <label for="notifyTitle">标题：</label>
                        <input type="text" class="form-control" id="notifyTitle" name="notifyTitle" placeholder="请输入标题" required>
                    </div>
                    <div class="form-group">
                        <label for="notifyContext">内容：</label>
                        <textarea class="form-control" id="notifyContext" name="notifyContext" placeholder="请输入内容" rows="5" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="notifyCreateDate">发布日期：</label>
                        <input type="date" class="form-control" id="notifyCreateDate" name="notifyCreateDate" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">发布</button>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- 更新模态框 -->
<div class="modal fade" id="updateNoticeModal" tabindex="-1" role="dialog" aria-labelledby="updateNoticeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h3 class="modal-title" id="updateNoticeModalLabel" style="text-align: center">更新活动信息</h3>
                <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- 更新公告信息的表单 -->
                <form id="updateNoticeForm">
                    <input type="hidden" id="updateNotifyId">
                    <div class="form-group">
                        <label for="updateNotifyTitle">活动标题</label>
                        <input type="text" class="form-control" id="updateNotifyTitle" required>
                    </div>
                    <div class="form-group">
                        <label for="updateNotifyContext">活动内容</label>
                        <textarea class="form-control" id="updateNotifyContext" rows="3" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="updateNotifyDate">活动日期</label>
                        <input type="date" class="form-control" id="updateNotifyDate" required>
                    </div>
                    <div class="form-group text-center"> <!-- 这里添加了 text-center 类 -->
                        <button type="submit" class="btn btn-primary">更新</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>



<script>
    function operate(selectElement, notifyId) {
        const action = selectElement.value; // 获取操作类型（更新或删除）
        if (action === 'update') {
            // 发送 AJAX 请求获取公告信息
            $.get('/book/admin/findNotifyById?notifyId=' + notifyId, function(data) {
                // 填充更新模态框的表单
                $('#updateNotifyId').val(notifyId);
                $('#updateNotifyTitle').val(data.notifyTitle);
                $('#updateNotifyContext').val(data.notifyContext);
                $('#updateNotifyDate').val(data.notifyCreateDate);
                // 将日期字符串转换为日期对象
                const notifyDate = new Date(data.notifyCreateDate);
                // 格式化日期为 "YYYY-MM-DD"
                const formattedDate = notifyDate.toISOString().split('T')[0];
                $('#updateNotifyDate').val(formattedDate); // 设置日期输入框的值
                // 显示更新模态框
                $('#updateNoticeModal').modal('show');
            });
        } else if (action === 'delete') {
            // 确认用户是否真的想删除
            if (confirm('确定要删除这条公告吗？')) {
                // 发送删除请求到后端
                $.ajax({
                    type: 'DELETE',
                    url: '/book/admin/deleteNotify?notifyId=' + notifyId, // 假设这是删除公告的API路径
                    success: function(response) {
                        // 请求成功后的处理
                        console.log('删除成功:', response);
                        // 根据需要，可以选择性地刷新页面或局部更新UI以反映删除结果
                        location.reload(); // 这里可以刷新页面
                    },
                    error: function(xhr, status, error) {
                        // 请求失败时的处理
                        console.error('删除失败:', error);
                    }
                });
            }
        }
    }



    // 当更新模态框中的表单提交时执行此函数
    $('#updateNoticeForm').submit(function(event) {
        // 阻止表单默认提交行为
        event.preventDefault();
        // 获取表单数据
        const formData = {
            notifyId: $('#updateNotifyId').val(),
            notifyTitle: $('#updateNotifyTitle').val(),
            notifyContext: $('#updateNotifyContext').val(),
            notifyCreateDate: $('#updateNotifyDate').val()
        };
        // 发送 AJAX 请求到后端
        $.ajax({
            type: 'POST', // 请求类型
            url: '/book/admin/updateNotify', // 请求的后端接口地址
            data: JSON.stringify(formData), // 将表单数据转换为 JSON 字符串
            contentType: 'application/json', // 发送的数据类型
            success: function(response) {
                // 请求成功后的处理
                // 这里可以根据后端返回的响应执行相应的操作，例如显示成功消息等
                console.log('更新成功:', response);
                // 关闭模态框
                $('#updateNoticeModal').modal('hide');
                //此行代码来刷新整个页面
                location.reload();
            },
            error: function(xhr, status, error) {
                // 请求失败时的处理
                // 这里可以处理错误情况，例如显示错误消息等
                console.error('更新失败:', error);
            }
        });
    });
</script>



</body>
</html>
